<template>
  <comcard>
    <div slot="title_name">账号列表</div>
    <div slot="body_name">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="账号" width="120" prop="account">
        </el-table-column>
        <el-table-column label="用户组" width="120" prop="userGroup">
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.ctime | timeMF }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="default">编辑</el-button>

            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <!--  
          @size-change: 每页显示的数据条数变化时触发的事件
        @current-change：当前页码变化时触发的事件
         :current-page: 当前的页码值
         :page-sizes： 下拉框中条数的选项
         :page-size : 当前每页显示的数据条数
         layout :可选工具的布局
         :total: 总数据条数
        -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="searchObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>

      <el-row>
        <el-button type="danger" @click="delAll">批量删除</el-button>
      </el-row>
    </div>
  </comcard>
</template>

<script>
import { api_query, api_del, api_delAll } from "../../api/users.js";
import comcard from "../../components/comcard/index.vue";
export default {
  components: {
    comcard,
  },

  data() {
    return {
      total: 0,
      searchObj: {
        currentPage: 1,
        pageSize: 5,
      },
      multipleSelection: [],
      tableData: [],
    };
  },

  mounted() {
    this.query();
  },
  methods: {
    //批量删除
    async delAll() {
      if (this.multipleSelection.length > 0) {
        let ids = this.multipleSelection.map((item) => item.id);
        ids = JSON.stringify(ids);
        let rst = await api_delAll({ ids });
        console.log(rst);
        let { code } = rst;
        if (code == 0) {
          this.query();
        }
      } else {
        this.$message.warning("请选择需要删除的数据");
      }
    },

    async query() {
      let rst = await api_query(this.searchObj);
      let { data, total } = rst;
      // console.log(data);
      this.tableData = data;
      // console.log(this.tableData);
      this.total = total;
      // console.log(rst);
    },

    //删除
    async del(id) {
      let rst = await api_del({ id });
      console.log(rst);
      this.query();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    // 当数据条数变化时触发的函数
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    // 页码变化时触发的函数
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },
  },
};
</script>

<style lang="less" scoped>
</style>